<template>
  <view>
    <view class="w100 h-100 rows rowsm pl-24 pr-22">
      <view class="w100 h-68 br-34 bgff rowsb rowsm pl-36 pr-4" style="border: 2rpx solid #4886FF;">
        <input type="text" placeholder="输入姓名学号" v-model="stNumberOrName" placeholder-class="fs-26 col888">
        <view class="w-98 h-60 br-30 rowsc rowsm" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="handelSearch">
          <image src="/static/icon_osbc-1.png" class="w-28 h-28" mode=""></image>
        </view>
      </view>
    </view>
    
    <view class="w100 h-100 bgff rowsa rowsm fs-28">
      <view class="" :class="{'fw-b fs-30' : active == 0}" :style="active == 0 ? 'color:#4878FF;' : 'color:#888;'" @click="handelTab(0)">总成绩</view>
      <view class="" :class="{'fw-b fs-30' : active == 1}" :style="active == 1 ? 'color:#4878FF;' : 'color:#888;'" @click="handelTab(1)">实践成绩x80%</view>
      <view class="" :class="{'fw-b fs-30' : active == 2}" :style="active == 2 ? 'color:#4878FF;' : 'color:#888;'" @click="handelTab(2)">理论成绩x20%</view>
      <view class="rows rowsm" @click="active = 3,$refs.filter.open()">
        <!-- $refs.filter.open() -->
        <!-- <view class="" :class="{'fw-b fs-30' : active == 3}" :style="active == 3 ? 'color:#4878FF;' : 'color:#888;'">筛选</view> -->
       <!-- <image src="/static/icon_sx.png" class="w-28 h-28 ml-10" mode=""></image  -->
      </view>
    </view>
    
    <view class="w100 rowsb rowsm h-102 fs-30 fw-b col333  pr-24" style="background-color: #F7F6FA;">
      <view class="w-80 h100 rowsc rowsm">排名</view>
      <view class="w-220 h100 rowsc rowsm">学院</view>
      <view class="w100 h100 rowsc rowsm">姓名</view>
      <view class="w-220 h100 rowsc rowsm">班级</view>
      <view class="w-80 h100 rowsc rowsm">分数</view>
    </view>
    
    <view class="w100 h-102 rowsb rowsm fs-30 col333  pr-24" v-for="(item,index) in list" :key="index" :style="{'background-color':index % 2 != 0 ? '#F7F6FA' : '#fff'}">
      <view class="w-80 h100 rowsc rowsm">{{item.rank}}</view>
      <view class="w-220 h100 rowsc rowsm">{{item.xyName}}</view>
      <view class="w100 h100 rowsc rowsm">{{item.name}}</view>
      <view class="w-210 h100 rowsc rowsm bjName">{{item.bjName}}</view>
      <view class="w-80 h100 rowsc rowsm">{{item.dfCount}}</view>
    </view>
    
    
    <uni-popup ref="filter" type="bottom">
      <view class="w100 bgff pt-30 pb-56 pl-20 pr-20" style="border-radius: 40rpx 40rpx 0 0;">
        <view class="w100 rowsc rowsm fs-30 fw-b col333">数据筛选范围</view>
        <view class="w100 rowsb rowsm h-122 pl-20 pr-20 fs-30 col333" style="border-bottom: 2rpx solid rgba(112, 112, 112, .1);">
          <view class="">学院</view>
          <picker mode="selector"  @change="handelXy" :value="xyIndex" :range="xyList">
            <view class="rows rowsm trt">
              <input type="text" placeholder="全部" placeholder-class="fs-30 col888" v-model="dataFrom.xyName">
              <image src="/static/icon_scc-1.png" class="w-24 ml-10 h-24" mode=""></image>
            </view>
          </picker>
        </view>
        <view class="w100 rowsb rowsm h-122 pl-20 pr-20 fs-30 col333" style="border-bottom: 2rpx solid rgba(112, 112, 112, .1);">
          <view class="">专业</view>
          <picker mode="selector"  @change="handelName" :value="zyIndex" :range="zyList">
            <view class="rows rowsm trt">
                <input type="text" placeholder="全部" placeholder-class="fs-30 col888" v-model="dataFrom.name">
              <image src="/static/icon_scc-1.png" class="w-24 ml-10 h-24" mode=""></image>
            </view>
          </picker>
        </view>
        <view class="w100 rowsb rowsm h-122 pl-20 pr-20 fs-30 col333" style="border-bottom: 2rpx solid rgba(112, 112, 112, .1);">
          <view class="">年级</view>
          <picker mode="selector"  @change="handelNj" :value="njIndex" :range="njList">
            <view class="rows rowsm trt">
              <input type="text" placeholder="全部" placeholder-class="fs-30 col888" v-model="dataFrom.njName">
              <image src="/static/icon_scc-1.png" class="w-24 ml-10 h-24" mode=""></image>
            </view>
          </picker>
        </view>
        <view class="w100 rowsb rowsm h-122 pl-20 pr-20 fs-30 col333" style="border-bottom: 2rpx solid rgba(112, 112, 112, .1);">
          <view class="">班级</view>
          <picker mode="selector" @change="handelBj" :value="bjIndex" :range="bjList">
            <view class="rows rowsm trt">
              <input type="text" placeholder="全部" placeholder-class="fs-30 col888" v-model="dataFrom.bjName">
              <image src="/static/icon_scc-1.png" class="w-24 ml-10 h-24" mode=""></image>
            </view>
          </picker>
        </view>
        <view class="mt-40 w100 h-84 br-42 rowsc rowsm colfff fs-30 fw-b" style="background: linear-gradient(to bottom,#4897FF,#4878FF);" @click="handelSubmit">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[],
        active:0,
        stNumberOrName:'',
        dataFrom:{
          xyName:'',
          name:'',
          njName:'',
          bjName:'',
          xyId:'',
          userId:'',
          njId:'',
          clId:'',
        },
        xyIndex:0,
        xyList:[],
        zyList:[],
        zyIndex:0,
        njList:[],
        njIndex:0,
        bjList:[],
        bjIndex:0,
        total:0,
        limit: {
          pageNum: 1,
          pageSize: 20
        },
      };
    },
    onLoad() {
      this.getList()
    },
     onReachBottom() {
      if (this.list.length < this.total) {
        this.limit.pageNum++;
        this.getList()
      }
    },
    onPullDownRefresh() {
      this.limit.pageNum = 1
      this.getList()
    },
    methods:{
      handelSubmit(){
        this.getList()
        this.$refs.filter.close()
        this.dataFrom = {
          xyName:'',
          name:'',
          njName:'',
          bjName:'',
          xyId:'',
          userId:'',
          njId:'',
          clId:'',
        }
      },
      handelTab(val){
        this.limit.pageNum = 1
        this.active =val
        this.getList()
      },
      handelSearch(){
        this.limit.pageNum = 1
        this.getList()
      },
      getList(){
        let data = {
          isSort:+this.active + 1,
          sortType:'desc',
          stNumberOrName:this.stNumberOrName,
          xyId:this.dataFrom.xyId,
          userId:this.dataFrom.userId,
          njId:this.dataFrom.njId,
          clId:this.dataFrom.clId
        }
        this.$tools.axiosFromToken('POST',`prouser/listPhb?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{...data},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          // let {rows} = res
          // this.list = rows
          if(this.list.length>0){
           this.xyList = this.list.map(item => item.xyName).filter((item, index, self) => {
            return self.indexOf(item) === index;
          });
            this.zyList = this.list.map(item => item.zyName).filter((item, index, self) => {
            return self.indexOf(item) === index;
          });
            this.njList = this.list.map(item => item.njName).filter((item, index, self) => {
            return self.indexOf(item) === index;
          });
            this.bjList = this.list.map(item => item.bjName).filter((item, index, self) => {
            return self.indexOf(item) === index;
          });
          }
        })
      },
      handelXy(e){
        this.xyIndex = e.detail.value
        this.dataFrom.xyId = this.list[e.detail.value].xyId
        this.dataFrom.xyName = this.list[e.detail.value].xyName
      },
      handelName(e){
        this.zyIndex = e.detail.value
        this.dataFrom.userId = this.list[e.detail.value].userId
        this.dataFrom.name = this.zyList[e.detail.value]
      },
      handelNj(e){
        this.njIndex = e.detail.value
        this.dataFrom.njId = this.list[e.detail.value].njId
        this.dataFrom.njName = this.njList[e.detail.value]
      },
      handelBj(e){
        this.bjIndex = e.detail.value
        this.dataFrom.clId = this.list[e.detail.value].clId
        this.dataFrom.bjName = this.bjList[e.detail.value]
      },
    }
  }
</script>

<style lang="scss">
page {
  background-color: #fff;
}
// .bjName{
//   text-align: center;
// }
</style>
